<template>
  <div class="box">
    <el-card>
      <el-button type="primary" @click="ClickConfirm">确定</el-button>
      <h2>已知表头</h2>
      <el-checkbox-group v-model="checkList">
        <el-checkbox label="分类"></el-checkbox>
        <el-checkbox label="重点任务"></el-checkbox>
        <el-checkbox label="序号"></el-checkbox>
        <el-checkbox label="具体任务"></el-checkbox>
        <el-checkbox label="完成标准"></el-checkbox>
        <el-checkbox label="预期标志性成果"></el-checkbox>
        <el-checkbox label="完成时间"></el-checkbox>
        <el-checkbox label="完成进度"></el-checkbox>
        <el-checkbox label="责任人"></el-checkbox>
        <el-checkbox label="责任部门"></el-checkbox>
      </el-checkbox-group>
      <h2>自定义表头</h2>
      <el-col :span="24" class="btn-Add">
        <el-button type="primary" @click="oldAdd">添加</el-button>
      </el-col>
      <el-table :data="tableData" style="width: 100%" :height="tableHeight">
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="onDel(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="表头名称" min-width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name"></el-input>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'zidingyibiaoto',
  data() {
    return {
      checkList: [],
      tableData: [],
      tableHeight: ''
    }
  },
  created() {
    // 100是表格外其它布局占的高度，这个数值根据自己实际情况修改
    this.tableHeight = window.innerHeight - 390
    const data = JSON.parse(this.$store.state.user.listHeader)
    this.checkList = data.chkit
    console.log(data.tablist)
    data.tablist.forEach(item => {
      console.log(item)
      this.tableData.push({ name: item })
    })

    // this.checkList = this.$store.state.user.listHeader[0].chkit
  },
  methods: {
    oldAdd() {
      this.tableData.push({})
    },
    ClickConfirm() {
      const tablist = []
      this.tableData.forEach(item => {
        tablist.push(item.name)
      })
      const newList = { chkit: this.checkList, tablist: tablist }
      this.$store.dispatch('user/tabHeader', newList)
    },
    onDel(data) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {})
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style scoped>
.box {
  padding: 20px;
  background-color: #fdfbf2;
}
.el-card {
  background-color: transparent;
}
.el-table {
  overflow: hidden;
}

.box >>> .el-table,
.el-table__expanded-cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

.box >>> .el-table th {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table tr {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}
</style>
